#{extends 'include/base.html' /}
#{set title:'文章' /}
<div class="box visual">
</div>
<style type="text/css">
    .jiathis_txt{
        padding-left: 0px !important;
        padding-right: 0px !important;;
    }
</style>
<div class="email_win visual">
    <form action="@{Api.writeMail()}">
        <p class="email_win_title">&nbsp站内信</p>
        <p class="hidden mail_err" style="width: 100%;text-align: center;color:red; font-size: 15px;">错误</p>
        <div class="input_wrap box_input_wrap">
            <label for="">标题:</label>
            <input type="text" class="box_input"  name="mail.title" id="title" />
            <input type="hidden" value="${user.id}"  name="mail.receive_id" id="receive_id" />
        </div>
        <div class="input_wrap">
            <label for="">内容:</label>
            <textarea class="box_text"  name="mail.content" id="content" ></textarea>
        </div>
        <div class="btn_wrap_box">
            <button class="btn btn_wrap_box_send" id="btn">发送</button>
            <button class="btn btn_wrap_box_end" type="reset">取消</button>
        </div>
    </form>
    <img src="../public/images/close.png" alt="" class="email_close"/>
</div>
<div class="simple_wrap">
    <div class="article_main">
        <h2 class="article_main_title">${article.title}</h2>
        <p class="article_main_p">标签:
            #{if tagList==null} 暂无#{/if}
        #{list items:tagList, as:"item"}
            <a href="@{Application.search(item,0)}">${item}</a>
        #{/list}
            <span>${new Date(article.createTime).format('yyyy/MM/dd')}</span></p>
        <p class="article_main_p">文章来源:D.FRWI</p>
        <div class="article-content">
        ${article.content.raw()}
        </div>
        #{if attachment!=null}
            <a href="../${attachment.url}" class="collect_btn">下载附件</a>
        #{/if}
        #{if article.authorId==userId}
            <div class="add_to_album">
                <select name="" id="album_list">
                    <option value="">选择专辑</option>

                    #{list items:albumList, as:"item"}
                        <option value="${item.id}">${item.albumName}</option>
                    #{/list}
                </select>
                <button class="album_click">添加</button>
            </div>
        #{/if}
        <p class="article_main_p">版权声明</p>
        <p class="article_main_p">${article.copyRight}</p>
        <a href="#" class="collect_btn" id="collect_btn" style="color: #fff;background-color:#2bcd9c;padding: 5px;">收藏文章</a>

        <div id="art_review" style="position: relative">
            <!-- JiaThis Button BEGIN -->
            <div class="jiathis_style_24x24"style="position: absolute; top: -35px; left: 120px;">
                <a class="jiathis_button_qzone"></a>
                <a class="jiathis_button_tsina"></a>
                <a class="jiathis_button_tqq"></a>
                <a class="jiathis_button_weixin"></a>
                <a class="jiathis_button_renren"></a>
                <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank"></a>
            </div>
            <!-- JiaThis Button END -->
            <div class="fix">
                <span class="l review-left">
                    <span class="number">${article.commentNum}</span>
                    <span>评论</span>
                </span>
                <span class="r review-right">

                    <textarea name="comment_text" id="comment_text" rows="6" class="r bd1 review-input"></textarea><input type="hidden" id="rp_id">
                </span>
                <a href="#" id="com_submit">发布</a>
            </div>
            <ul id="review-ul" class="mt15">
            #{list items:webServiceBean.data, as:"item"}

                <li class="fix review-li" id="cfix_32393">
                    <div style="display: inline-block;width: 65px">
                    <img src="${item.url?item.url:"../public/images/tt.png"}" width="65" height="65" style="position: absolute;top: 0">
                        </div>
                    <div class="wd500">
                        <strong class="f16">${item.nickName}</strong>
                        <span class="c1 ml15">${new Date(item.time).format('yyyy/MM/dd hh:mm:ss')}</span>
                        <span class="r"> </span>
                        <div class="fix mt10">
                            <p class="replay-p">${item.content}</p>
                        </div>
                    </div>
                </li>
             #{/list}
            </ul>
            <div class="clear"></div>
            <div class="review-more wd610" style="display: block;" alt="2">查看更多</div></div>
    </div>
    <div class="article_side">
        <div class="article_side_author">
            <img src="${user.getPhoto()}" alt="" class="article_side_author_img"/>
            <h3 class="article_side_author_name"><a href="@{Concerns.concernMan(userId,0)}">${user.nickname?user.nickname:"佚名"}</a></h3>
            <p class="article_side_author_feature">个性化签名</p>
            <p class="article_side_author_fcont">${user.sign?user.sign:"暂无签名"}</p>
            <p class="article_side_author_address">${user.address}|${user.workArea}</p>
            <div class="article_btn_wrap">
                <a href="" class="article_side_author_concern">+关注</a>
                <a href="" class="article_side_author_email">发私信</a>
            </div>
            <div class="article_addition_wrap">
                <p class="article_addition_view"><img src="../public/images/view.png" alt=""/>浏览<span>${article.click}</span></p>
                <p class="article_addition_rep"><img src="../public/images/rep.png" alt=""/>评论<span>${article.commentNum}</span></p>
            </div>
        </div>
        <div class="article_side_focus dib-div">
            <p class="article_side_focus_p">关注我们</p>
            <a class="icon-about1" href="http://i.youku.com/u/UMjk1NjE4NTk0NA" target="_blank"></a><a class="icon-about2" href="http://user.qzone.qq.com/1440300769?ptlang=2052" target="_blank"></a><a class="icon-about3" href="http://weibo.com/5551861948/profile?topnav=1&wvr=6" target="_blank"></a><a class="icon-about4" href="http://www.douban.com/people/122782392/" target="_blank"></a><a class="icon-about5" href="http://v.qq.com/vplus/379300ff86620eba18616f9785799de9" target="_blank"></a><a class="icon-about6" href="/member/mbox" target="_blank"></a>
        </div>
        <div class="article_side_ad">
            <img src="../${advertisement?advertisement.url:""}" alt=""/>
        </div>
        <div class="article_side_hot">
            <ul class="article_side_hot_1ul">
                <li class="article_side_hot_1ul_active" id="hotArticle">热门文章</li>
                <li class="article_side_hot_1ul_middle" id="hotRep">热门评论</li>
                <li id="hotUser">热门会员</li>
            </ul>
            <div class="clear"></div>
            <ol class="top_list" id="top_list"></ol>
            <ol class="top_list visual" id="replaylist">
            #{list items:result_new, as:"item"}
                <li><a href="@{Application.article(item.articleId,0)}" target="_blank">${item.content}</a></li>

            #{/list}
            </ol>
            <ol class="top_list visual" id="userlist">
            #{list items:result, as:"item"}
                <li><a href="@{Concerns.concernMan(item.id,0)}" target="_blank">${item.nickName?item.nickName:"佚名"}</a></li>
            #{/list}
            </ol>

        </div>
    </div>
    <div class="clear"></div>
    <br/>
    <ul class="main_ul"></ul>
    <div class="clear"></div>

</div>
<script id="pai" type="text/template">
    {@each data as it,index}
    <li><a href="${host}Application/article?id=&(it.id)&" target="_blank">&(it.title)&</a></li>
    {@/each}
</script>
<script id="headertpl" type="text/template">
        {@each data as it,index}
                {@if index<6 }
        <li>
            <section class="main_ul_photo">
                <a href="${host}Application/article?id=&(it.id)&">
                    <img src="&(it.photoUrl)&" alt=""/>
                </a>
            </section>
            <section class="main_ul_section">
                <p class="main_ul_section_p"> <a href="${host}Application/article?id=&(it.id)&">&(it.title)&</a></p>
                <span class="main_ul_section_span">BY <a href="${host}Concerns/concernMan?userId=&(it.authorId)&">&(it.authorName?it.authorName:"佚名")&</a></span>
                <div class="main_view">
                    <p><img src="../public/images/view.png" alt=""/>&(it.click)&</p><p><img src="../public/images/rep.png" alt=""/>&(it.commentNum)&</p>
                </div>
            </section>
        </li>
         {@/if}
        {@/each}
</script>
<script id="repltpl" type="text/template">
    {@each data as it,index}

    <li class="fix review-li" id="cfix_32393">
        <div style="display: inline-block;width: 65px">
            <img src="&(it.url)&" width="65" height="65"  style="position: absolute;top: 0">
        </div>
    <div class="wd500">
        <strong class="f16">&(it.nickName)&</strong>
        <span class="c1 ml15">&(it.time)&</span>
        <span class="r"> </span>
        <div class="fix mt10">
            <p class="replay-p">&(it.content)&</p>
        </div>
    </div>
    </li>
    {@/each}

</script>
<script type="text/javascript">
    $("#hotArticle").click(function (event) {
        event.preventDefault();
        $(".article_side_hot_1ul li").removeClass("article_side_hot_1ul_active");
        $("#hotArticle").addClass("article_side_hot_1ul_active");
        $(".top_list").addClass("visual");
        $("#top_list").removeClass("visual");
    });
    $("#hotRep").click(function (event) {
        event.preventDefault();
        $(".article_side_hot_1ul li").removeClass("article_side_hot_1ul_active");
        $("#hotRep").addClass("article_side_hot_1ul_active");
        $(".top_list").addClass("visual");
        $("#replaylist").removeClass("visual");
    });
    $("#hotUser").click(function (event) {
        event.preventDefault();
        $(".article_side_hot_1ul li").removeClass("article_side_hot_1ul_active");
        $("#hotUser").addClass("article_side_hot_1ul_active");
        $(".top_list").addClass("visual");
        $("#userlist").removeClass("visual");
    });
    /**
     * 站内信
     */
    $('.article_side_author_email').click(function (event) {
        event.preventDefault();
        $('.box').removeClass('visual');
        $('.email_win').removeClass('visual');
    });
    $('.email_close').click(function () {
        $('.box').addClass('visual');
        $('.email_win').addClass('visual');
    })
    $('#btn').click(function (event) {
        event.preventDefault();
        var title = $('#title').val();
        var content =  $('#content').val();
        var receive_id =  $('#receive_id').val();
        var  data ={
            mail:{
            }
        };
        data.mail.receive_id=receive_id;
        data.mail.title=title;
        data.mail.content=content;
        $.post('@{Api.writeMail()}', data, function(res) {
            $('.mail_err').text(res.data);
            $('.mail_err').removeClass('hidden');
        });
    });
    /**
     * 关注
     */
    $('.article_side_author_concern').click(function (event) {
        event.preventDefault();
        var data = {
            beConcernId:"${user.id}"
        }
        $.post('@{Api.concern()}', data, function(res) {
            if(res.result==0) {
                alert(res.data)
            }
            else {

                $('.article_side_author_concern').text("已关注")
            }
        });
    })
    /**
     * 收藏
     */
    $("#collect_btn").click(function (event) {
        event.preventDefault();
        var data={};
        data.articleId = "${article.id}";
        $.post('@{Api.collectWork()}', data, function(res) {
                alert(res.data);
        });
    })
    /**
     * 添加到专辑
     */
    $(".album_click").click(function (event) {
        event.preventDefault();
        var data={};
        data.articleId = "${article.id}";
        data.albumId = $("#album_list").val();
        $.post('@{Api.addArticleToAlbum()}', data, function(res) {
            alert(res.data);
        });
    })
    /**
     * 评论
     */
    $("#com_submit").click(function (event) {
        event.preventDefault();
        var cont = $('#comment_text').val();
        if(cont==""){
            alert("评论不能为空");
        }
        else{
            var data={}
            data.comment=cont;
            data.articleId="${article.id}";
            $.post('@{Api.commentArticle()}', data, function(res) {
                if(res.result==0) {
                    alert(res.data);
                }
                else {
                    location.reload();
                }
            });
        }

    })

</script>
<script src="@{'/public/javascripts/juicer.js'}" type="text/javascript"></script>
<script>
    juicer.set({
        'tag::operationOpen': '{@',
        'tag::operationClose': '}',
        'tag::interpolateOpen': '&(',
        'tag::interpolateClose': ')&',
        'tag::commentOpen': '{#',
        'tag::commentClose': '}'
    });
    var url ="${host}";
    $(document).ready(function($) {
            getHeatedArticle(10,-1,1,function(data){
                var html = juicer($("#headertpl").html(),data);
                var paihtml = juicer($("#pai").html(),data);
                $('.main_ul').prepend(html);
                $('#top_list').prepend(paihtml);
            });
            $.get(url+'api/getPopularUser', function(data) {
                    console.log(data)
            });
        
    });
    function getHeatedArticle(perpage,type,page,successCB){
        $.get(url+'api/getHeatedArticle?perpage='+perpage+'&type='+type+'&page='+page, function(data) {
            successCB(data);
        });
    }
    /**
     * 更多评论
     */
    $('.review-more').click(function (event) {
        var data={};
        data.articleId = "${article.id}";
        data.page=$(".review-more").attr('alt');
        $.post('@{Api.getArticleComment()}', data, function(res) {
            if(res.result==0) {
                alert(res.data);
            }
            else {
                var html = juicer($("#repltpl").html(),res);
                $('#review-ul').append(html);
            }
        });
    })

</script>

<script type="text/javascript" src="http://v3.jiathis.com/code/jia.js" charset="utf-8"></script>
